<template>


	<view class="codefun-flex-col page space-y-104">
		<view class="codefun-flex-row codefun-items-center group space-x-16">
			<view class="codefun-items-start codefun-flex-auto search" @click="toSearch">
				<image class="image"
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/64979aaa5a7e3f03109285bc/64979d5a726ab50011f33a6a/16876651151262927216.png" />
				<input class='oninput' placeholder="请输入搜索内容" type="text">

			</view>

			<view class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper">
				<text class="text">搜索</text>
			</view>
		</view>
		<scroll-view class="scroll" scroll-x="true">

			<view class="item" v-for="item in tag" @click="clicknav">
				{{item.tagdata}}
			</view>

		</scroll-view>

		<scroll-view scroll-y=true class=scroll-grid @scrolltolower="loadMore">
			<view class="grid">
				<view class="containNoteview" v-for="(item, index) in visibleNoteids" :key="index">
					<noteview :noteid="item">
					</noteview>
				</view>
				<view v-if="loading" class="load-more">加载更多...</view>
			</view>
		</scroll-view>


	</view>

</template>

<script>
	export default {

		data() {
			return {
				noteids: [],
				visibleNoteids: [], // 显示的noteview数据
				loading: false, // 是否显示加载提示
				pics: [],
				pic: '',
				tag: [{
						tagdata: "学习"
					}, {
						tagdata: "校园生活"
					}, {
						tagdata: "音乐"
					},  {
						tagdata: "游戏"
					}, {
						tagdata: "穿搭"
					}
					
				],
			};
		},

		mounted() {
			this.getCommunityNoteList();

		},
		//测试暂时不用了？
		onLoad(options) {
			// this.noteid = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
		},
		computed: {
			showLoading() {
				// 判断是否还有未显示的noteview
				return this.visibleNoteids.length < this.noteids.length;
			}
		},
		methods: {

			loadMore() {
				// 当滚动到底部时加载剩余的noteview
				if (this.showLoading) {
					this.loading = true; // 显示加载状态
					// 模拟异步加载数据的延迟
					setTimeout(() => {
						const remainingNoteids = this.noteids.slice(this.visibleNoteids.length);
						this.visibleNoteids = this.visibleNoteids.concat(remainingNoteids);
						this.loading = false; // 隐藏加载状态
					}, 1000);
				}
			},
			getCommunityNoteList() {
				let that=this;
				uni.request({
					url: '/community/getCommunityNoteList',
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.statusCode === 200) {
							console.log("commui"+res.data)
							that.noteids = res.data; // 将获取到的数据赋值给layercontents数组
							that.visibleNoteids = that.noteids.slice(0, 6);
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},



			clicknav() {

			},

			toSearch() {
				uni.navigateTo({
						url: "../../pages/searchpage/searchpage"
					}),
					console.log(this.noteid)
			}
		},
	};
</script>

<style scoped lang="css">
	.page {
		padding: 52.33rpx 0 0;
		background-color: #e3ebfc;
		width: 100%;
		overflow-y: hidden;
		overflow-x: hidden;
		height: 100%;
	}


	.space-y-104>view:not(:first-child),
	.space-y-104>text:not(:first-child),
	.space-y-104>image:not(:first-child) {
		margin-top: 181.4rpx;
	}

	.group {
		padding-left: 48.84rpx;
		padding-right: 34.88rpx;
	}

	.space-x-16>view:not(:first-child),
	.space-x-16>text:not(:first-child),
	.space-x-16>image:not(:first-child) {
		margin-left: 27.91rpx;
	}

	.search {
		display: flex;
		padding: 6.98rpx 0;
		background-color: #ffffff;
		border-radius: 13.95rpx;
		height: 73.26rpx;
		border: solid 5.23rpx #6073eb;
	}

	.image {
		margin-left: 6.98rpx;
		width: 48.84rpx;
		height: 48.84rpx;
	}

	.oninput {
		flex: 1;
	}

	.text-wrapper {
		padding: 6.98rpx 0;
		background-color: #9aa5ed;
		border-radius: 13.95rpx;
		width: 99.42rpx;
		height: 54.07rpx;
		border: solid 5.23rpx #6073eb;
	}

	.text {
		color: #1c167d;
		font-size: 27.91rpx;
		font-family: AlimamaShuHeiTi;
		line-height: 26.16rpx;
	}

	.scroll {
		margin-top: 50rpx;
		box-sizing: border-box;
		white-space: nowrap;

		.item {
			padding: 17.44rpx 0;
			background-color: #6073eb;
			width: 156.98rpx;
			height: 71.51rpx;
			border: solid 5.23rpx #9aa5ed;
			display: inline-block;
			margin-right: 10rpx;
			font-size: 27.91rpx;
			font-family: AlimamaShuHeiTi;
			line-height: 26.16rpx;
			text-align: center;
			color: #f5f7fc;

			&.active {
				background: ;
			}

		}
	}

	.scroll-grid {
		height: 1100rpx;
		margin-top: 50rpx;
	}

	.grid {
		padding: 0 59.3rpx;
		height: 835.47rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 80.23rpx;
		column-gap: 52.33rpx;
	}

	.grid-item {
		padding: 34.88rpx 6.98rpx 13.95rpx 24.42rpx;
		background-color: black;
		border-radius: 13.95rpx;
		border: solid 8.72rpx #6073eb;
	}

	.space-y-13>view:not(:first-child),
	.space-y-13>text:not(:first-child),
	.space-y-13>image:not(:first-child) {
		margin-top: 22.67rpx;
	}

	.image_2 {
		margin-left: 3.49rpx;
		width: 214.53rpx;
		height: 205.81rpx;
	}

	.font_1 {
		font-size: 41.86rpx;
		font-family: AlimamaShuHeiTi;
		line-height: 33.14rpx;
		color: #1c167d;
	}

	.text_2 {
		margin-left: 3.49rpx;
	}

	.image_3 {
		width: 27.91rpx;
		height: 27.91rpx;
	}

	.image_4 {
		margin-right: 76.74rpx;
	}

	.load-more {
		/* 但他也没有居中。。 */
		justify-content: center;
		align-items: center;
	}
</style>